<script type='text/javascript' src='http://www.google.com/jsapi'></script>

  <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geomap']});
   google.setOnLoadCallback(drawMap);

    function drawMap() {

      var region_data = '{{$region_data}}';

      region_data = region_data.replace(/\[/gi,"");
      region_data = region_data.replace(/]/g,"");
      region_data = region_data.replace(/"/g,"");

      var a = region_data.split(",");

      var data = new google.visualization.DataTable();
      data.addRows(a.length/2);
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Popularity');

        var j=0;
        for(var i=0;i<a.length/2;)
        {
            if(a[i]=="(not set)")
            {}
            else
            {
                data.setValue(j, 0, a[i]);
                data.setValue(j, 1, parseInt(a[i+1]));
                j++;
            }
            i=i+2;
        }


      var options = {};
      options['dataMode'] = 'regions';
      options['width'] = '800px';
      options['height'] = '450px';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
  };
  </script>
<script type="text/javascript">

	$(function() {
		$("#datepicker").datepicker();
	});

	$(function() {
		var dates = $('#from, #to').datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function(selectedDate) {
				var option = this.id == "from" ? "minDate" : "maxDate";
				var instance = $(this).data("datepicker");
				var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
				dates.not(this).datepicker("option", option, date);
			}
		});
	});

  $(document).ready(function(){

    $('#event_start_date').datepicker({
			changeMonth: true,
			changeYear: true
		});
  });

  $(document).ready(function(){

    $('#event_end_date').datepicker({
			changeMonth: true,
			changeYear: true
		});
  });


</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
function replaceButtonText(buttonId, text)
{
  if (document.getElementById)
  {
    var button=document.getElementById(buttonId);
    if (button)
    {
      if (button.childNodes[0])
      {
        button.childNodes[0].nodeValue=text;
      }
      else if (button.value)
      {
        button.value=text;
      }
      else //if (button.innerHTML)
      {
        button.innerHTML=text;
      }
    }
  }
}
//-->
</SCRIPT>
<h1>Valulots Site Stats</h1>
<br>
<fieldset width="70%" align="center">
    <legend>Set Date Range</legend>
    <form method="post" action="{{$base_index_url}}/analytics/admin/map_overlay/" />
    <table align="center">
        <tr>
            <div class="demo">
            <td width="40%">Start Date :</td>
            <td id="right" align=left><input id="event_start_date" name="start_date" type="text" value="{{$date_range.0}}" ></td>
            </div>
        <tr>
            <div class="demo">
            <td>End Date :</td>
            <td id="right" align=left><input id="event_end_date" name="end_date" type="text" value="{{$date_range.1}}" ></td>
            </div>
        </tr>
        <tr>
            <td><input id="submit" name="date_range" type="submit" value="Submit" >
            </td>
        </tr>
    </table>
    </form>
</fieldset>

<fieldset>
    <legend>Map Overlay</legend>
    <div id='map_canvas'></div>
</fieldset>


{{if $getResults}}
<fieldset>
    <legend>Stat Data</legend>
    <table class="display" width="100%" id="table">
        <thead>
            <tr valign="center" align="center">
                 <th>Date</th>
                 <th>Country</th>
                 <th>Month</th>
                 <th>Unique Visitors</th>
                 <th>New Visits</th>
                 <th>Pageviews</th>
                 <th>Visits</th>
                 <th>Bounces</th>
                 <th>Entrances</th>
            </tr>
        </thead>
        <tbody>
        {{assign var="i" value=1}}
        {{foreach from=$getResults item=result}}
            <tr class="{{if $i%2 == 1}}odd {{else}}even{{/if}}">
                 <td class="sorting_1">{{$result->getDay()}}     </td>
                 <td>{{$result->getCountry()}}     </td>
                 <td>{{$result->getMonth()|replace:"$numeric_month":"$calender_month"}}, {{$result->getYear()}}</td>
                 <td>{{$result->getVisitors()}}</td>
                 <td>{{$result->getNewVisits()}}</td>
                 <td>{{$result->getPageviews()}}</td>
                 <td>{{$result->getVisits()}}</td>
                 <td>{{$result->getBounces()}}</td>
                 <td>{{$result->getEntrances()}}</td>
            </tr>
            <span style="display:none">{{$i++}}</span>
        {{/foreach}}
        </tbody>
    </table>
</fieldset>

{{/if}}

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:#dad; font-weight:bold; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <button>Hide 'em</button>

  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
<script>
    $("button").click(function () {
      $("p").hide("slow");
    });
</script>

</body>
</html>
